<template>
 <!-- <ul class="footer">
    <li :class="{active: '/home' === $route.path}" @click="goTo('/home')">
      <span class="iconfont iconyemian-copy-copy"></span>
      <p>首页</p>
    </li>
    <li :class="{active: '/menu' === $route.path}" @click="goTo('/menu')">
      <span class="iconfont iconcaidan"></span>
      <p>菜单</p>
    </li>
    <li :class="{active: '/admin' === $route.path}" @click="goTo('/admin')">
      <span class="iconfont iconguanli"></span>
      <p>管理</p>
    </li>
    <li :class="{active: '/about' === $route.path}" @click="goTo('/about')">
      <span class="iconfont iconguanyu"></span>
      <p>关于</p>
    </li>
  </ul>-->
  <ul class="footer">
    <li @click="goTo('/home')">
      <img :src="'/home' === $route.path ? footData[0].selectedImage : footData[0].unselectedImage"/>
      <p :class="{active: '/home' === $route.path}">首页</p>
    </li>
    <li @click="goTo('/activity')">
      <img :src="'/activity' === $route.path ? footData[1].selectedImage : footData[1].unselectedImage"/>
      <p :class="{active: '/activity' === $route.path}" >活动</p>
    </li>
    <li @click="goTo('/admin')">
      <img :src="'/admin' === $route.path ? footData[2].selectedImage : footData[2].unselectedImage"/>
      <p :class="{active: '/admin' === $route.path}">管理</p>
    </li>
    <li @click="goTo('/about')">
      <img :src="'/about' === $route.path ? footData[3].selectedImage : footData[3].unselectedImage"/>
      <p :class="{active: '/about' === $route.path}">关于</p>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      footData: [
        {
          unselectedImage: require('@/assets/images/icon1.jpg'),
          selectedImage: require('@/assets/images/icon1_1.jpg')
        },
        {
          unselectedImage: require('@/assets/images/icon2.jpg'),
          selectedImage: require('@/assets/images/icon2_1.jpg')
        },
        {
          unselectedImage: require('@/assets/images/icon3.jpg'),
          selectedImage: require('@/assets/images/icon3_1.jpg')
        },
        {
          unselectedImage: require('@/assets/images/icon4.jpg'),
          selectedImage: require('@/assets/images/icon4_1.jpg')
        }
      ]
    }
  },
  methods: {
    goTo (path) {
      this.$router.replace(path)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .footer
    display flex
    justify-content space-around
    position fixed
    left 0
    bottom 0
    width 100%
    box-sizing border-box
    padding 9px 0
    text-align center
    background white
    li
      color #b3b2b2
      span
        font-size 48px
      img
        width 48px
      p
        font-size 28px
        margin-top 6px
    .active
      color #02a774
</style>
